iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
3
Modern Web

鉄人28号FX系列 第 7

鉄人28号FX 鉄人7号「字重牛」font-weight

  • 分享至 

  • xImage
  •  

★ 支線:夢境返回現實中 ↓↓↓

顯示半山坡位置圖

↑↑ MEN!+50% )
↓ CON!-30% )

(~O~)
:打呵欠!! (
伸懶腰 )

:好餓哦~~
到處巡視中 )

閱讀前,建議先前往 鉄人6号「字級羊」獲取少量信任值,此為半山坡守護續章。


★★★ 關卡條件 ↓↓↓

字重單位(font-weight)

草原上 [字重牛]
悠然吃草聲( 翻譯蒟蒻 )

熟度 料理方式 熱量參考
100 極細 (生片) Thin / Hairline
200 超細 (涮鍋) Extra / Ultra Light
300 細 (熱炒) Light
400 普通 (鐵板) Normal / Regular
500 中等 (酥炸) Medium
600 稍粗 (炭烤) Semi Bold / Demi Bold
700 粗 (油煎) Bold
800 超粗 (慢燉) Extra / Ultra Bold
900 特(極)粗 (爐烤) Black / Heavy
950 ??? Extra Black / Ultra Black
(註 文案參考:字戀 用好字重,烤好牛肉。)

(〃∀〃):頂級 A5 和牛放題。
其油花之細密,美名為「霜降牛肉」!

★ 咬到幻想肉片一口:
字重(牛肉)單位(熟度):font-weight 屬性指定了字型的粗細程度。

font-weight

註:具有 400、700 和 900 等字型系列的字重映射。深灰色表示該字重不存在。

..( _ _)ノ|壁
我是不是真的餓發昏了?
肉香味~~ )

湖口邊 [字重牛]
盜汗吃草聲( 翻譯蒟蒻 )

font-weight 屬性設定值與字型來源有直接關聯。

只有少數特定字型會支援所有較常用字重系列。當指定不存在時,會自動搜尋最接近的字重替代設定值。而 'bolder''lighter' 指定值相對於父元素 (容器) 為基準,將被繼承的 font-weight 值計算相鄰近升降序範圍:

繼承值 升序 bolder 降序 lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Σ(lliд゚ノ)ノ
啊。傻爆眼!!
散發濃濃味~ )

★ 不著痕跡黃金一坨:

  • 期望更有效地控制字重值,建議直接採用數值化 (例 400、700 等) 設定。
  • 透過使用 font-synthesis 屬性可避免未明確行為。(關閉瀏覽器的默認字體合成)
  • CSS Fonts Module Level 4 (工作草案) 更進一步定義 font-weight 接受 11000 之間的任何數值,而可變字體 (variable font),目前尚未普及化。

(´⊙ω⊙`)
疑? 這顆大樹?

剛剛那位叔叔是不?!
說了什麼?

放牧守則寫著

對於字體粗細的稱呼,臺灣相較為含糊,如細黑、中黑、粗黑、超黑、特黑體等,較難直接從名稱(形容詞)辨別粗細。而近年來漸改用國際上通行的「W 制」與「英文稱呼法」順序清晰許多。

  • 「W 制」代表字重 Weight 縮寫,一般來說 W1W2 因過細不適用於內文,W3W4 就很適合用於內文,而 W5 以上做為標題顯得較適合。
  • 「英文稱呼法」相當有規範,也較中文命名統一,但對使用者來說,或許不如「W 制」來的直白、明晰。

To Be Continued ...


[ 追加經驗值 ]
註:參考來源 CSS Fonts Module Level 3
字戀 用好字重,烤好牛肉。
BBC 設計素養第一課:教科書字體選用指南
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人6号「字級羊」font-size
下一篇
鉄人28号FX 鉄人8号「色域石」color
系列文
鉄人28号FX30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言